<html lang="zh">
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style-type: none;
        }
        #down div span{
            border: red solid 1px;
            padding: 5px;
            margin-top: 5px;
            display: inline-block;
        }
        #down div {
            margin-top: 16px;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>YXB</title>
</head>
<body>
<h1>YXB</h1>


<div id="down" style="height: 80%;  width: 100%; background-color:white; overflow: auto;  ">

    <div>
        <p>颜色</p>
        <span>红色</span> <span>蓝色</span> <span>黑色</span>
    </div>

    <div>
        <p>参数</p>
        <span>4G+32G</span> <span>6G+64G</span>
    </div>


    <div>
        <p>产品型号</p>
        <span>Iphone XR</span> <span>Iphone 10</span>
    </div>


</div>


</body>


<script>

    function Contact(){
        this.init();
    }


    Contact.prototype.init = function () {
        var lis = document.querySelector('#down').addEventListener('click', function (e) {
            var target = e.target || e.srcElement;


            if (target.nodeName === "SPAN"){            // 先是判断是不是span标签, 然后再进行下一步
                console.log("你触发了span标签.......");
                for (var i = 0; i < target.parentNode.childNodes.length; i++) {
                    if (target.parentNode.childNodes[i].nodeName === "SPAN") {
                        // console.log(target.parentNode.childNodes[i].nodeName);
                        target.parentNode.childNodes[i].style.backgroundColor = "white";   // 把所有的span标签bgcolor都设置为 white
                    }
                }
                target.style.backgroundColor = "red";                              // 再把选中的span标签 bgcolor 设置为red
            }


        })
    };

    new Contact();

</script>
</html>